<template>
  <div id="aboutUsNav">
    <div class="main" style="position: relative">
      <div class="info">
        <div class="call-box">
          <div class="icon">
            <div class="icon-info">
              <el-icon size="16"><Phone /></el-icon>
            </div>
          </div>
          <div>服务热线：{{ kfMobile?.[0] || '-' }}</div>
        </div>

        <div
          class="isVip curpoin"
          v-if="
            store.getters.user.userInfo.realVIP == 0 ||
            store.getters.user.userInfo.realVIP == 3
          "
        >
          <div><img class="img" src="../../assets/images/vip.png" /></div>
          <div @click="onClickOpenVIP">开通VIP</div>
          <div style="margin: 0 10px">|</div>
          <div @click="hanleBindingVIP">绑定vip卡</div>
        </div>
        <div class="myname curpoin">
          <div v-if="getToken()" class="df" style="padding: 10px 0">
            <div
              v-if="
                store.getters.user.userInfo.realVIP == 1 ||
                store.getters.user.userInfo.realVIP == 2
              "
            >
              <img class="img" src="@/assets/images/vip.png" />
            </div>
            <div class="curr" @click="handleGoUserCent">
              <el-popover
                trigger="hover"
                width="300"
                popper-class="popoverStyle"
              >
                <template #reference>
                  <span style="margin-right: 16px">{{
                    store.getters.user.userInfo.nick
                  }}</span>
                </template>
                <div class="popver-contaier">
                  <div class="header">
                    <div class="left">
                      <img
                        v-if="store.getters.user.userInfo.head"
                        :src="
                          'https://mcdn.chatgk.com' +
                          store.getters.user.userInfo.head
                        "
                        alt=""
                      />
                      <img
                        v-else
                        src="../../assets/images/default-avatar.png"
                        alt=""
                      />
                    </div>
                    <div class="mid">
                      <div class="name font-weight700" style="text-align: left">
                        {{ store.getters.user.userInfo.nick }}
                      </div>
                      <div class="year f12 text-color">
                        高考年份{{
                          store.getters.user.userInfo.graduate_time
                        }}年
                      </div>
                    </div>
                    <div style="color: var(--active-text)" class="f12">
                      编辑
                    </div>
                  </div>
                  <div
                    class="isVip df"
                    v-if="store.getters.user.userInfo.realVIP"
                  >
                    <img
                      style="width: 20px; margin: 0 5px"
                      src="../../assets/images/vip.png"
                      alt=""
                    />
                    <div>
                      {{ store.getters.user.userInfo.cardTypeName }}
                      <span style="margin: 0 5px">|</span> 有效期至{{
                        store.getters.user.userInfo.expiretime
                      }}
                    </div>
                  </div>

                  <div
                    class="isVip df"
                    style="justify-content: space-around"
                    v-else
                  >
                    <div>
                      <span @click="onClickOpenVIP">升级VIP</span>
                      <span style="margin: 0 5px">|</span>
                      <span @click="hanleBindingVIP">绑定VIP</span>
                    </div>
                  </div>
                  <!-- tab -->
                  <div class="tab-box fexlDf mt10 curr">
                    <div class="tab-left" @click="handleUserInfo">基本信息</div>
                    <div class="tab-left" @click="handleEditPassword">
                      修改密码
                    </div>
                  </div>
                  <!-- tab -->
                  <div class="mt10" style="text-align: left">
                    <div
                      :class="{ isActive: isActive == item.url }"
                      v-for="(item, index) in userMenuCenter"
                      :key="item.id"
                      class="items curr"
                      @click="goToSubject(item, index)"
                    >
                      <span
                        style="margin-right: 10px"
                        :class="item.icon"
                      ></span>
                      {{ item.title }}
                    </div>
                  </div>
                  <!-- 退出 -->
                  <div class="login-out df curpoin">
                    <span
                      class="iconfont icon-tuichu"
                      style="margin-right: 10px"
                    ></span>
                    <div @click="handleLoginOut">退出</div>
                  </div>
                </div>
              </el-popover>
            </div>
          </div>
          <div v-else class="df">
            <div @click="handleLogin(0)">登录</div>
            <div>丨</div>
            <div @click="handleLogin(1)">注册</div>
          </div>
        </div>
        <div class="input-search" style="width: 160px">
          <el-input
            @keyup.enter="handleSearch"
            v-model="searchVal"
            class="search"
            size="small"
            placeholder="院校/专业/资讯"
            :suffix-icon="Search"
          />
        </div>

        <!-- 小程序 -->
        <el-popover :width="200" v-if="!!wxapp2">
          <template #reference>
            <div class="df curr" style="margin-right: 20px">
              <div class="qrcode-item f12">小程序</div>
            </div>
          </template>
          <QrcodeGenerator
            :text="wxapp2"
            :size="180"
            level="H"
            :logoUrl="logoUrl"
            :logoSize="10"
          />
        </el-popover>
        <!-- h5 -->
        <el-popover :width="200" v-if="!!h5addr">
          <template #reference>
            <div class="df curr" style="margin-right: 20px">
              <div class="qrcode-item f12">移动端</div>
            </div>
          </template>
          <QrcodeGenerator
            :text="h5addr"
            :size="180"
            level="H"
            :logoUrl="logoUrl"
            :logoSize="10"
          />
        </el-popover>
        <!-- 下载app -->
        <el-popover :width="200" v-if="!!appdown2">
          <template #reference>
            <div class="df curr">
              <span class="iconfont icon-shouji"></span>
              <div class="qrcode-item f12">手机APP</div>
            </div>
          </template>
          <template #default>
            <!-- <div
              style="
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              "
            >
              <img :src="appdown2Img" />
              <div style="text-align: center">扫码下载APP</div>
            </div> -->
            <QrcodeGenerator
              :text="appdown"
              :size="180"
              level="H"
              :logoUrl="logoUrl"
              :logoSize="10"
            />
            <div style="text-align: center">扫码下载APP</div>
          </template>
        </el-popover>

        <div class="help">
          <div class="help-icon">
            <el-icon size="20"><QuestionFilled /></el-icon>
          </div>
          <div>帮助</div>
          <span
            v-if="store.getters.user.isGkb.isGKB == 1"
            style="color: red; margin-left: 5px; font-size: 10px"
            >({{ store.getters.user.isGkb.isGKB == 1 ? '高考版' : '' }})</span
          >
        </div>
      </div>
    </div>
  </div>
  <!-- 绑定vip -->
  <bindingVIP ref="bindingVipRef" />
  <!-- 登录组件 -->
  <loginCard ref="loginCardRef" />
</template>

<script setup>
import { ElMessage } from 'element-plus';
import loginCard from '@/components/LoginCard';
import bindingVIP from '@/components/BindingVip';
import { removeToken } from '@/utils/auth';
import { Search } from '@element-plus/icons-vue';
import { getToken } from '@/utils/auth';
import { useStore } from 'vuex';
import QRCode from 'qrcode';
import { useRouter, useRoute } from 'vue-router';
import { ref, computed } from 'vue';
// 前端生成二维码组件
import QrcodeGenerator from '@/components/QrcodeGenerator/index.vue';

const route = useRoute();
const router = useRouter();
const store = useStore();
const searchVal = ref('');
const bindingVipRef = ref('');
const isActive = ref(route.path);
const loginCardRef = ref('');

const generateQR = async (text) => {
  try {
    const opts = {
      errorCorrectionLevel: 'H',
      type: 'image/png',
      quality: 0.9,
      margin: 1,
    };
    const qrImage = await QRCode.toDataURL(text, opts);
    return qrImage;
  } catch (err) {
    console.log('err:', err);
  }
};

const kfMobile = computed(() => store.getters.indexInfo.mobile.kf_mobile);
const appdown2 = computed(() => store.getters.indexInfo.appdown);
const wxapp2 = computed(() => store.getters.indexInfo.wxapp);
const logoUrl = computed(() => store.getters.indexInfo.favicon);
const h5addr = computed(() => store.getters.indexInfo.h5addr);
const appdown = computed(() => store.getters.indexInfo.appdown);

const appdown2Img = ref('');
if (appdown2.value) {
  generateQR(appdown2.value).then((res) => {
    appdown2Img.value = res;
  });
}

const userMenuCenter = ref([
  {
    id: 1,
    title: '应用广场',
    url: '/applicationSquare',
    icon: 'iconfont icon-yingyongguangchang',
  },
  {
    id: 2,
    title: '志愿表',
    url: '/volunteerList',
    icon: 'iconfont icon-wodezhiyuanbiao',
  },
  {
    id: 3,
    title: '选科方案',
    url: '/mysubject',
    icon: 'iconfont icon-xuankefangan',
  },
  { id: 4, title: '测评报告', url: '/ping', icon: 'iconfont icon-ziyuan14' },
]);
const handleUserInfo = () => {
  router.push({ path: '/accounts' });
};
const handleEditPassword = () => {
  router.push({
    path: '/accounts',
    query: {
      type: 1,
    },
  });
};
const handleSearch = () => {
  if (!searchVal.value) {
    ElMessage({
      message: '搜索不能为空',
      type: 'warning',
    });
  } else {
    router.push({
      path: '/homesearch',
      query: {
        searchKey: searchVal.value,
      },
    });
  }
};
const handleLoginOut = () => {
  localStorage.removeItem('vuex');
  removeToken();
  location.reload();
  router.push('/home');
};
const goToSubject = (item) => {
  isActive.value = item.url;
  router.push(item.url);
};
const handleGoUserCent = () => {
  router.push('/applicationSquare');
};
const hanleBindingVIP = () => {
  if (Object.keys(store.getters.user.userInfo).length != 0) {
    bindingVipRef.value.handleOpenVisible();
  } else {
    handleLogin(0);
  }
};
const handleLogin = (type) => {
  store.dispatch('user/changeLoginType', store.getters.user.loginType || type);
  loginCardRef.value.handleVisibleShow();
};

function onClickOpenVIP() {
  router.push({
    path: '/shopserve/shopDet',
    query: {
      id: store.getters.indexInfo.vipserviceid,
    },
  });
}
</script>

<style lang="scss" scoped>
.qrcode-item {
  color: #999;
  &:hover {
    color: black;
  }
}
#aboutUsNav {
  width: 100%;
  height: 40px;
  background: #f2f2f2;
  .main {
    .info {
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      align-items: center;
      font-size: 14px;
      .call-box {
        margin-right: 20px;
        height: 40px;
        display: flex;
        align-items: center;
        color: #9d9d9d;
        .icon {
          margin-top: 5px;
        }
        .icon-info {
          margin: 0 8px;
        }
      }
      .isVip {
        display: flex;
        align-items: center;
        margin: 0 30px;
      }
      .img {
        width: 25px;
      }
      .myname {
        display: flex;
        align-items: center;
        position: relative;
      }
      .input-search {
        margin: 0 20px;
      }
      .help {
        display: flex;
        align-items: center;
        color: #9d9d9d;
        .help-icon {
          margin: 0 8px;
          margin-top: 5px;
        }
      }
    }
  }
}
:deep(.el-input--small .el-input__wrapper) {
  border-radius: 100px;
}
</style>
<style lang="scss">
.popver-contaier,
.popoverStyle {
  .header {
    padding: 15px;
    display: flex;

    .left {
      border-radius: 50%;

      img {
        width: 50px;
        border-radius: 50%;
      }
    }

    .mid {
      margin: 0 60px 0 20px;
    }
  }

  .isVip {
    background: #fdecd2;
    height: 35px;
    line-height: 35px;
    margin: 0 15px;
    border-radius: 4px;
  }

  .tab-box {
    height: 40px;
    text-align: center;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    line-height: 40px;

    .tab-left {
      width: 50%;
      height: 100%;

      border-right: 1px solid #f2f2f2;
    }

    .tab-left {
      width: 50%;
      height: 100%;
    }
  }

  .login-out {
    padding: 15px;
    // margin: 10px;
    border-top: 1px solid #f2f2f2;
    // border-bottom: 1px solid #f2f2f2;;
    &:hover {
      color: var(--color-text);
    }
  }

  .triangle-up {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: 8px solid #fff;
    position: absolute;
    top: -16px;
    left: 50%;
  }
  .isActive {
    background: var(--background-color);
    color: #fff !important;
  }
  .items {
    // background: red;
    margin: 10px 0;
    padding: 13px;

    &:hover {
      // background: var(--active-text);
      color: var(--color-text);
    }
  }
}
</style>
